<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title id="title"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/main.css">


    <script src="/js/jquery-2.1.4.min.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/vue/vue.js"></script>

    <script src="/js/echarts.min.js"></script>
    <style>
        * {
            font-size: 16px;
        }

        a {
            color: #337ab7;
        }

        .comment-area {
            padding-left: 80px;
            padding-right: 50px;

        }

        .hide {
            display: none;
        }

        .comment-area textarea {
            width: 100%;
            overflow: auto;
            word-break: break-all;
            height: 100px;
            color: #000;
            font-size: 1em;
            resize: none;
            border-color: rgb(169, 169, 169);
        }

        .disabled {
            color: rgba(100, 100, 100, 0.6)
        }

        .author-right {
            padding-left: 10px;
        }

        .author-right .content {
            background-color: white;
        }

        .card-headerText {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: 600;
            font-size: 15px;
            color: #1a1a1a;
            -webkit-tap-highlight-color: rgba(26, 26, 26, 0);
        }

        .number-board {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
        }

        .card-section {
            display: flex;
            flex-direction: row;
            padding: 10px 0 20px 10px;
        }

        .card-section img {
            width: 60px;
            height: 60px;
            border-radius: 5px;
        }

        .card-section h2 {
            font-size: 16px;
            font-weight: 900;
        }

        .lay-this {
            color: red;
        }

        .followed:after {
            content: '已关注';
        }

        .followed:hover:after {
            content: '取消关注';
        }

    </style>

</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>
<div class="container-wrap">
    <div class="container container-message container-details" style="width:1000px;">
        <div class="layui-row" id="article" v-if="show">
            <div class="contar-wrap layui-col-md9">
                <div class="item">
                    <div class="item-box  layer-photos-demo1 layer-photos-demo">
                        <h3>{{article.title}}</h3>
                        <h5>发布于：<span>{{article.releaseTime}}</span></h5>
                        <p v-html="article.content"></p>
                        <div class="count layui-clear">
                            <span class="pull-left">阅读 <em>{{readCount}}</em></span>
                            <span class="pull-right" style="margin: 0 20px;" @click="collectHandler()"
                                  v-if="loginUser.id!=article.user.id">
                                <i :class="{'layui-icon':true,'lay-this':collect}" style="position:relative; top: 0;">&#xe658;</i>收藏
                            </span>
                            <span class="pull-right like" @click="zanHandler($event)">
                                <i :class="{'layui-icon':true,'layui-icon-praise':true,'lay-this':zan}"></i><em>{{zanCount}}</em>
                            </span>
                        </div>
                    </div>
                </div>
                <div id="articleAnalysis" style="background-color: white">
                    <h5>文章分析</h5>
                    <div class="layui-tab">
                        <ul class="layui-tab-title">
                            <li class="layui-this">情感分析</li>
                            <li>关键词提取</li>
                            <li>词频统计</li>
                            <li>文章摘要</li>
                        </ul>
                        <div class="layui-tab-content">
                            <div class="layui-tab-item layui-show">
                                <div id="pic1" style="height: 400px; margin: 20px auto;"></div>
                            </div>
                            <div class="layui-tab-item">
                                <div style="margin: 30px auto;display: flex; align-content: center; justify-content: center">
                                    <img src="http://172.15.120.249:8000/static/word_cloud/2.png" height="250"/>
                                </div>
                            </div>
                            <div class="layui-tab-item">
                                <div id="pic2" style="width:700px; height: 400px;"></div>
                            </div>
                            <div class="layui-tab-item">内容3</div>
                        </div>
                    </div>
                </div>
                <a name="comment"> </a>
                <div class="comt layui-clear">
                    <div>
                        <a href="javascript:;" @click="showTextArea($event,1, '')"
                           :class="{'pull-left':true, 'disabled':!enableComment}">评论</a>
                    </div>
                    <div class="comment-area hide">
                        <textarea cols="80" rows="50" placeholder="来说几句吧......" class=""></textarea>
                        <span class="send" style="color: #aaa;">
                            <!--发送回复，评论ID-->
                            <a href="javascript:;" @click="sendComments($event)">发送</a>
                        </span>
                    </div>
                    <!--<a :href="'/teacher/article/comment.html?id='+article.id" class="pull-right">写评论</a>-->
                </div>
                <div id="LAY-msg-box" style="padding: 20px 50px; background-color: white">
                    <!--所有评论-->
                    <div class="info-item" v-for="(c,index) in comments" :key="index" :id="'comment_pos'+index">
                        <!--<a :name="'comment_pos_'+index" class="hide">&nbsp;</a>-->
                        <img class="info-img" src="/images/info-img.png" alt="">
                        <div class="info-text">
                            <p class="title count">
                                <span class="name"
                                      style="font-size: 20px; margin-top: -10px;">{{c.user.username}}</span>
                                <!--<span class="info-img like"><i class="layui-icon layui-icon-praise"></i>5.8万</span>-->
                            </p>
                            <div class="comment-time" style="margin: -20px 0 10px 0;">
                                <span style="font-size: 10px ">{{c.time}}</span>
                            </div>
                            <p class="info-intr" style="margin-top: -10px;">
                                {{c.content}}
                            </p>
                        </div>

                        <div id="replyList" style="">
                            <div style="float: right;color: #aaa; padding-right: 20px; font-size: 12px;">
                                <a href="javascript:;" @click="showTextArea($event,2,c.user.id)">回复</a>
                            </div>
                            <div class="comment-area hide">
                                <textarea cols="80" rows="50" placeholder="来说几句吧......" class=""></textarea>
                                <span class="send" style="color: #aaa;">
                                    <!--发送回复，评论ID-->
                                    <a href="javascript:;"
                                       @click="sendReply(c.id, {id:c.user.id,username:c.user.username},index, $event)">发送</a>
                                </span>
                            </div>
                        </div>
                        <!--所有回复-->
                        <div style="border-left: 1px solid #ccc; margin-left: 75px; ">
                            <div class="reply-list" v-for="(r, index) in c.replyList" :key="index"
                                 style="font-size:14px;padding-left: 10px;margin-top: 20px;">
                                <div class="reply">
                                    <div>
                                        <a href="#">{{r.from.username}}:</a>
                                        <a href="#">@{{r.to.username}}</a>
                                        <span>{{r.content}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
            <div class="author-right layui-col-md3">
                <div class="content">
                    <div class="card-headerText" style="padding: 10px 20px;">关于作者</div>
                    <hr/>
                    <div class="card-section">
                        <img src="/images/fly.jpg" style=""/>
                        <div style="padding: 10px;">
                            <h3>{{loginUser.username}}</h3>
                        </div>
                    </div>
                    <div class="number-board">
                        <a href="#">
                            <div>
                                <div>
                                    文章
                                </div>
                                <strong>{{loginUser.articleCount}}</strong>
                            </div>
                        </a>
                        <a href="#">
                            <div>
                                <div>
                                    关注者
                                </div>
                                <strong>{{loginUser.followCount}}</strong>
                            </div>
                        </a>
                    </div>
                    <div style="padding: 10px;" v-if="loginUser.id!=article.user.id">
                        <button class="layui-btn layui-btn-normal" v-if="!followed" @click="followHandler()">
                            <i class="layui-icon layui-icon-add-1" style="color: white;"></i>关注
                        </button>
                        <button class="layui-btn layui-btn-primary followed"
                                v-else=""
                                @click="followHandler()">
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:include="/teacher/templates::footer"></div>


<script>
    function initPic1() {

        var myCharts1 = echarts.init(document.getElementById('pic1'));
        option = {
            title: {
                text: '文章情感极性分析',
                subtext: '正面和负面',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['正面情绪', '负面情绪']
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {
                        show: true,
                        type: ['pie', 'funnel'],
                        option: {
                            funnel: {
                                x: '25%',
                                width: '50%',
                                funnelAlign: 'left',
                                max: 1548
                            }
                        }
                    },
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [
                        {value: 50, name: '正面情绪'},
                        {value: 150, name: '负面情绪'},
                    ]
                }
            ]
        };

        myCharts1.setOption(option);

        var myChart2 = echarts.init(document.getElementById('pic2'))
        var xData = "['周一', '周二', '周三', '周四', '周五']";
        var yData1 = "[10, 25, 21, 25, 36]";
        var yData2 = "[40, 28, 45, 36, 12]";
        var yData3 = "[15, 56, 34, 21, 8]";
        option2 = {
            title: {
                text: '文章词频统计',
                subtext: 'top10'
            },
            tooltip: {
                trigger: 'axis'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: ["列车", "香港", "高铁", "深港", "西九龙", "深圳", "内地", "开通", "车站", "乘客"]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '词频',
                    type: 'bar',
                    data: [35, 32, 24, 19, 18, 16, 13, 12, 11, 11],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                }
            ]
        };


        myChart2.setOption(option2)
    }
</script>
<script src="/js/teacher/article/details.js"></script>
</body>
</html>